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WAT HEB JE NODIG? 


e. CURSUS 


Een website met Joomla — deel 1 


Hoeda? Met Joomla! 


Ben (of word) jij de webmaster van een club of vereniging? Dan heb je wellicht de handen vol met de nieuwe website. 
Met Joomla verminder je echter je eigen werk en laat je de andere (bestuurs)leden van de club ook meewerken, 
zelfs als die geen kaas hebben gegeten van html en webmastering 


N 
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WAT DOEN WE? 


WAARMEE? 


DUUR? 


oomla is een CMS, en dat staat voor Content Ma- 

nagement System — wat zoveel betekent als een 
systeem om inhoud te beheren. Vroeger werden deze sys- 
temen uitsluitend gebruikt voor grote bedrijfswebsites, 
want zo’n CMS kostte al snel tienduizenden euro's. Een 
CMS werkt namelijk erg makkelijk: bepaalde delen of pa- 
gina’s van de site kunnen beheerd worden door verant- 
woordelijken die verder niets van html of webdesign 
moeten kennen. Als webmaster zorg jij er gewoon voor dat 
de sjablonen en de pagina’s zelf online staan. Let wel: je 
co-webmasters hebben dan misschien wel niet te veel 
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webdesignkennis nodig, maar het is wel handig als jij zelf 
een klein beetje je weg kent in webmasterland. 

Sinds enkele jaren zijn CMS-systemen, zoals Joomla www. 
joomla.org, voor iedereen toegankelijk. Joomla is bijvoor- 
beeld helemaal gratis, en je kan het op zowat elke web- 
server installeren. In het eerste deel van deze cursus 
installeren we Joomla en beginnen we met de ontwikke- 
Ting van een website van De Treiners vzw, een (fictieve) 
vereniging van enkele enthousiastelingen op het gebied 
van miniatuur- en modelbouwtreintjes! 


MOEILIJKHEID? 


E 
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Joomla kan je op je eigen computer installeren, maar 
dat raden we niet aan. Niet alleen moet je de webser- 
ver Apache installeren, maar ook de scripttaal PHP en 
de openbrondatabank MySQL. Allemaal gratis, dat wel, 
maar je eigen pc als webserver gebruiken, is geen 
goed idee. Daarom moet je op zoek naar een webhost 
met de volgende minimumvereisten: 

* PHP 4.2 of hoger 

* MySQL 3.23 of hoger 

+ Apache 1.13.19 of hoger 


Je eigen internetprovider biedt weliswaar webruimte 
aan voor je site, maar geen enkele provider in ons land 
biedt je standaard MySQL of PHP. Je moet dus op zoek 
naar een echte hostingprovider. In ons land zijn er een 
paar providers die je verder kunnen helpen, zoals 
Combell www.combell.com, Hostbasket www.hostbasket. 
com of Hostway www.hostway.be, maar niets weerhoudt 
je ervan om over de grenzen te kijken en in Google 
een zoekopdracht in te geven als ‘Joomla hosting’ of 
“PHP MySQL hosting’. Zo vonden we in Denemarken One 
www.one.com, dat een gelijkaardig pakket aanbiedt 
voor € 1,25/maand (+ € 12 opstartkosten). Als je goed 
zoekt, vind je snel een provider die je een dergelijk 
pakket kan aanbieden voor enkele euro's per maand. 
Gratis providers zijn niet zo makkelijk meer te vinden, 
en we raden ze je ook af: vaak komen er banners aan 
te pas, en in het verleden zijn dergelijke providers niet 
erg betrouwbaar gebleken. 
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Joomla aan de praat krijgen 


Joomla kan je downloaden op onze site www] 
bij de Aanvurrers van dit nummer. 
Bewaar het bestand in een nieuwe map op 
je harde schijf, bijvoorbeeld c:\soomLa. Open 
daarna de Verkenner en pak het bestand uit 
in dezelfde map — dit kan even duren! 
Aangezien Joomla een online programma is, 
moet je het uploaden naar je hostingprovi- 
der en dan pas installeren. Doe dat in de 
juiste map en maak eventueel een submap 
aan. Upload alles behalve het zip-bestand; 
dat is namelijk niet nodig. Je kan een gratis 
ftp-programma als SmartFTP www.smartftp. 
com gebruiken — de inloggegevens krijg je 
van je hostingprovider. Afhankelijk van de 
snelheid van je internetverbinding kan het 
uploaden tussen 5 en 30 minuten duren! 
Na het uploaden open je PT oortor == 
een browser en ga je naar 

je website bij de hosting- 
provider. Als je Joomla hebt 
geüpload naar een submap 
(die je bijvoorbeeld CMS ge- 
noemd hebt), surf je naar 


die submap: 


Allemaal groen: klaar om te 
installeren! 


Ems. De JoomLA PRE-INSTALLATION CHECK ver- 
schijnt. Het is belangrijk dat alle requiren 
SETTINGS groen zijn. Is dat niet het geval, 
vraag dan hulp aan je provider, want dan is 
er waarschijnlijk een of andere instelling 
fout. In de volgende stap geef je de gege- 
vens van je MySQL-databank in — ook die 
krijg je van je hostingprovider. Daarna geef 
je de website een naam, voer je een e-mail- 
adres in en bepaal je een wachtwoord voor 
de beheerder. Vergeet dit wachtwoord niet! 
Eens dat gebeurd is, kan je naar de site 
gaan… en zie je het bericht dat je de map 
INSTALLATION moet verwijderen. Doe dit dan 
ook met je ftp-programma. Surf je daarna 
naar je site, dan zie je een voorbeeldsite van 
Joomla staan. 


pre-installation check 


Basisbegrippen 


Ben je nog niet vertrouwd met een CMS-systeem, dan moet je eerst 

enkele basisbegrippen kennen. Een CMS verdeelt namelijk twee 

cruciale zaken voor een website: de inhoud (of content) en de lay- 

out van een site. In Joomla moet je eerst de lay-out maken, en dat 

doe je door met sjablonen of templates te werken. Eenmaal dat 

gebeurd is, kan je (of iemand anders) de inhoud aan de website 

toevoegen. In deze cursus gaan we zelf geen sjablonen maken: er 

zijn er immers honderden gratis te vinden, die we makkelijk kunnen 

aanpassen. De inhoud van je site kan je thuisbrengen in de vol- 

gende delen: 

* Secties (sections): De hoofdcategorieën van je site, die je in de 
navigatie van je site terugvindt. 

* Categorieën (careaortes): Subcategorieën onder een bepaalde sec- 
tie. 

* Inhoud (content rrems): De eigenlijke inhoud van een pagina. 

Een Joomla-site heeft ook nog een navigatie of menu, dat meestal 

gewoon is afgeleid van de secties en categorieën. Maar daarover 


later meer. 


Een sjabloon kiezen 


Voor we de site aanmaken, bepalen we eerst een sjabloon of 
template. Het standaardsjabloon is namelijk nogal saai. Wij 
kiezen voor een ander sjabloon dat al standaard in Joomla zit: 
selecteer gewoon het sjabloon mapevourweB en klik op DerauLr. 
Als je nu naar je site gaat kijken, zie je de nieuwe template 
meteen al in actie! 

Templates vind je trouwens overal op internet. Zoek maar eens 
even met Google. Gratis templates vind je bijvoorbeeld op www. 
joomlaos.de/joomla_template_galerie.html (kies de bovenste link). 
Klik gewoon op Downtoap en haal het zip-bestand binnen. 
Daarna ga je in Joomla naar Instauters, TEMPLATES Site en klik je 
op BLADEREN. Ga naar het zip-bestand en klik vervolgens op 
UpLoap Fire & InsrauL. Daarna duid je het nieuwe sjabloon aan 
en klik je op Derauur om het sjabloon te activeren. 


Eh Treiner vzw - Administration [Joomla] - Microsoft Internet Explorer 


Bestand Bewerlan Beed Favorieten Extra velp 
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Kies de juiste template voor je site. 


In de beheersite pas je zowat alles aan. 
Je site verder aanpassen en updaten doe je gewoon via de beheer- 
website. Ga naar http://www.jouwurl.be/administrator en voer de gebrui- 
kersnaam en het wachtwoord in dat je tijdens de installatie hebt 
opgegeven. De interface ziet er misschien een beetje overweldigend 
uit, maar alles is toch vrij intuïtief. 


De structuur bepalen 


De structuur van onze verenigingswebsite houden we eenvoudig. Nadien kan je 
nog altijd makkelijk wijzigingen aanbrengen. Je bent natuurlijk vrij om zelf een 
structuur op poten te zetten. Best is om een en ander op papier te zetten en 
goed na te denken over een degelijke structuur. Hieronder vind je bij wijze van 
voorbeeld alvast de opbouw van onze site. In ons voorbeeld is ‘Activiteit’ een 
zogeheten sectie en ‘2006’ een categorie. En alles wat daar onder zit — de ei- 


genlijke inhoud — zijn “content items’. 


Activiteiten | Lid worden | Foto’s Over ons 
° 2006 e Formulier | 2006 e Doelstelling 
e 2007 e Vragen e 2005 e Historiek 

e 2004 e Bestuur 


Contact 
e Gegevens 
e Route 


De homepagina wordt automatisch gegenereerd via de sjablonen, dus is hier 
niet vermeld. De navigatie zal dezelfde structuur hebben als de sitestructuur. 
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CURSUS 


Secties en categorieën toevoegen 


Allereerst voeg je de vooraf bepaalde secties toe. Klik daarvoor op 
Section Manaaer. Je ziet 3 voorbeeldsecties; laat deze voorlopig staan. 
Klik op New en geef Activiteiten in bij True. Bij Section Name vullen we 
ook Activiteiten in. Onder Description, ten slotte, kan je een korte be- 
schrijving geven van deze sectie. We raden je wel aan het kort te 
houden, omdat de eigenlijke inhoud in de content items zal staan! Je 
kan verschillende lettertypes, groottes en links gebruiken, net als in 
een echte html-editor. Klik daarna op Save. Let op! Klik altijd op Save 
als je iets aanmaakt of wijzigt. Wijzig je niets, klik dan altijd op Cuose. 
Doe je dat niet, dan kunnen sommige items ‘gelockt’ blijven, zodat je 
ze niet meer kan bewerken! 

Vervolgens moet je de volgorde van de secties instellen. Doe dat onder 
Orper en klik daarna op het floppy-icoontje. Voorlopig staan er nog 3 
extra categorieën, maar dat is geen probleem. 
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Bepaal de volgorde van de secties. 


Na de secties volgt het toevoegen van de categorieën. Klik op Carecory 
Manager en daarna op New. Tik nu de titel en naam van de categorie in, 
en kies de juiste sectie uit het lijstje. Je kan ten slotte ook een be- 
schrijving toevoegen. Voeg alle categorieën toe, en kies zeker de 
juiste sectie! Je kan die namelijk niet meer wijzigen. Maak je een fout, 
zet dan een vinkje voor een categorie en klik op Derere. 


Inhoud aanmaken 


Nu zowel de secties als de categorieën aange- 
maakt zijn, wordt het eindelijk tijd om de 
inhoud toe te voegen. We gaan er hier van uit 
dat alle inhoud door de webmaster wordt 
toegevoegd. In het tweede deel van deze 
cursus leggen we je uit hoe bepaalde ‘content’ 
door anderen bewerkt of toegevoegd kan 
worden. 

We raden je aan om inhoud toe te voegen per 
sectie. Ga daarvoor naar het menu Content en 
kies Content By Section, Acirivireiten (de naam 
van de sectie) en daarna Irems. Je krijgt nu de 
Content Irems Manacer van de sectie in kwestie 
te zien. Klik op New om nieuwe inhoud toe te 
voegen. Je krijgt een pagina te zien waar je 
een titeltje kan invoeren — en uiteraard voeg 
je ook de inhoud zelf toe via een html-editor 
in de browser. Vergeet niet de juiste catego- 
rie te kiezen! Tip: je kan ook makkelijk tekst 
uit Word of Kladblok knippen en plakken in 
het venster. Als je klaar bent, klik je op Save. 
Voeg daarna meer inhoud toe, ook aan an- 
dere categorieën, maar je moet niet meteen 
alles vullen. Over afbeeldingen zullen we het 
trouwens later hebben. 


Inhoud voeg je toe via de Content Items Manager. 
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Overbodige informatie wissen 


Als je naar je site gaat kijken, dan zie je 
niet echt veel nieuws. Hier en daar is wel 
nieuwe inhoud zichtbaar, maar alles blijft 
bij het oude, inclusief afbeeldingen en 
navigatiemenu. We gaan eerst dat hoofd- 
menu (links) aanpakken. Om dat te doen, 
verwijder je eerst de informatie en pagi- 
na’s die standaard in Joomla zitten en die 
als demo gebruikt worden. Ga daarvoor 
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naar Content, ALL ContENT items en vink alle 
items aan die niets met je site te maken 


Verwijder niet-gebruikte inhoud met de knop Unpublish. 


hebben. Klik vervolgens op UnpuaLrsn. De items blijven dus voorlopig in je site staan, maar worden niet 
meer gepubliceerd. Op dezelfde manier kan je een pagina (tijdelijk) van je site verwijderen. 


Werken met menu's in Joomla 


Klik op Menu, MAINMENu om het hoofdmenu 
te bekijken. Standaard staan hier 10 
menu-items op, maar die mag je verwij- 
deren, met uitzondering van nummer 1: 
Home. Vink de overige 9 items aan en klik 
op Trasn. 

Klik vervolgens op New. Je krijgt nu het 
scherm New MENU iTEM te zien. Het ziet er 
erg overdonderend uit, maar aan een 
aantal items heb je genoeg: 
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Alle menu-items in Joomla Administrator. 


* Bloc — Content Section gebruik je om een link naar een hoofdcategorie op te nemen in het 


menu, bijvoorbeeld ‘Lid worden’. 


« Bloc — Content Careaory gebruik je om een link naar een categoriepagina op te 
menu, bijvoorbeeld ‘Formulier’ (onder ‘Lid worden’). 
e Link — Content Trem gebruik je om rechtstreeks te linken naar een pagina met inhoud (een 


content item). 


nemen in het 


Om het hoofdmenu aan te maken, klik je op BLoe — Content Section en geef je Activiteiten in als 
naam. Klik vervolgens naast Section op Activiteiten en klik op Save. Waarschijnlijk wil je ook be- 
paalde categorieën in het menu opnemen, idealiter onder de hoofdcategorie. Ook dat kan: kies 
gewoon BLog — Content Careaory, geef het menu een naam, (bijvoorbeeld 2006) en kies de Care- 
gory, (bijvoorbeeld Actrvirerten / 2006). Onder Parent Irem kies je niet Home maar wel Acrivrrerren. 
Het onderdeel ‘2006’ maakt nu deel uit van de ‘Activiteiten’. Doe dit voor alle items die je in 


het hoofdmenu wil hebben. 


CURSUS 
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Overbodige menu's verwijderen 


Neem je nu een kijkje op je site, dan zie je het hoofdmenu wel staan, 
en kan je er ook in navigeren. Afhankelijk van de ingegeven content 
zie je ook pagina’s verschijnen. Er staan echter twee overbodige menu's 
op de site: het menu onder het MAINMENU, dat OTHERMENU heet, en ook het 
menu helemaal bovenaan de site, dat ropmenu heet. Voor onze site zijn 
deze menu's niet nodig, en daarom verwijderen we ze. Ga naar Merv, 
Menu MAnacer en kies oTHERMENU. Klik vervolgens op Derere. Doe hetzelfde 
VOOr TOPMENU. 
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De website met eigen menu en inhoud. 


Inhoud toevoegen aan de homepagina 


Vind je dat de homepagina leeg is, dan kan je makkelijk content 
items toevoegen aan die pagina. Het volstaat om Show on FRONTPAGE 
aan te vinken bij een Content Irem: makkelijker kan niet! 
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Een vinkje plaatsen volstaat voor het toevoegen van inhoud aan de 
homepagina. 


VOLGENDE KEER 


Je kent nu de basisconcepten van Joomla, en je kan een structuur, 
inhoud en een menu maken. We toonden je ook hoe je een logo up- 
loadt en de homepagina bewerkt. In het volgende deel van deze 
cursus maken we onze site een stuk aantrekkelijker door afbeeldin- 
gen toe te voegen. Verder leer je hoe je inhoud door anderen kan 
laten bewerken (collaboration), hoe je enquêtes maakt, hoe je de site 
doorzoekt en nog enkele andere interessante zaken! Succes ermee! 
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Logo's en banners aanpassen 


Het menu heb je al kunnen aanpassen, maar de logo's boven- 
aan hebben nog altijd niets met de modelbouwvereniging te 
maken. Er is plaats voor een logo van de club, en voor een 
banner van een activiteit van de club of voor reclame. De 
afbeeldingen kan je echter niet zomaar aanpassen; ze maken 
namelijk deel uit van de template. Om de afbeeldingen te 
wijzigen, kan je twee wegen bewandelen: je vervangt de af- 
beeldingen via ftp door afbeeldingen met dezelfde naam, of 
je bewerkt de broncode van het sjabloon. 

De eerste optie is de makkelijkste, maar verplicht je wel om 
hetzelfde bestandstype te behouden. Het logo (links op de 
pagina) staat namelijk in de map /TEMPLATES/MADEYOURWEB/IMAGES 
en heeft de naam Loao.crr. 

De banner heet oMSBANNERI.PNG en staat in /IMAGES/BANNeRS. De 
banner heeft het standaardformaat 468x60 pixels, en het 
logo is een transparante gif van 250x80 pixels. Maak de no- 
dige afbeeldingen in Paint Shop of Photoshop en upload de 
bestanden naar de server via ftp. Ga vervolgens naar Compo- 
NENTS, BANNERS, MANAGE BANNERS en UnpusLisH OSM 2. Op die manier 
verschijnt enkel de banner die we net hebben geüpload. Ver- 
volgens klik je op OSM 1 en kan je de url wijzigen waar de 
banner naar verwijst. Klik vervolgens op Save. Leuk is dat je 
onder Impressions MADE meteen kan zien hoeveel keer de banner 
al weergegeven werd. « 
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Je kan precies zien hoeveel keer een banner weergegeven werd. 
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Op ons kerstdiner vord je getrakteerd op slies vat met mense 
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Zo ziet onze website er al uit na deel 1 van de cursus Joomla. 


